<template>
  <u-popup ref="goodsPop" v-model="goodsPopShow" mode="bottom" border-radius="16">
      <view style="padding: 20upx">
        <scroll-view scroll-y="true" style="height: 900upx;">
          <div v-for="item in goodsList" class="goodsItem" :key="item.id" @click="$u.route({url:'/pagesC/homeSon/goodsDetails',params:{id:item.id}})">
            <u-image class="goodsimg" width="200" height="200" mode="aspectFit" border-radius="10" :src="item.thumb_url"></u-image>
            <div class="right">
              <p class="name">{{ item.goods_name }}</p>
              <div class="u-flex u-row-between u-col-center">
                <p class="price"><span class="priceSymbol">¥</span>{{ item.shop_price }} </p>
                <span class="goBuyBtn" @click="getgoodsinfo(item)">马上抢</span>
              </div>
            </div>
          </div>
        </scroll-view>

      </view>

  </u-popup>
</template>

<script>
export default {
name: "goodsList",
  data(){
  return{
    goodsPopShow:false,
  }
  },
  onLoad() {
  	uni.request({
  		url: 'https://dsx.cdzer.com/api/Job/getshopjob', //仅为示例，并非真实接口地址。
  		method: 'POST',
  		data:{
  			shop_id:191
  		},
  		header: {
  			'content-type': 'application/x-www-form-urlencoded',
  		},
  		success: (res) => {
  			console.log(res,"招聘职位列表")
  		}
  	});
  },
  props:{
    goodsList:{
       type:Array,
       required:true,
       default:()=>[]
    }
  },
  
}
</script>

<style lang="scss" scoped>

.popTit {
  color: #333;
  text-align: center;
  margin: 28upx;
  font-weight: 800;
  font-size: 36upx;
}

.goodsItem {
  display: flex;
  color: #333;
  margin-bottom: 30upx;
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex:1;
  }

  .goodsimg {

    flex-shrink: 0;

    margin-right: 20upx;

  }

  .price {
    color: #fa3f3f;
    font-size: 36upx;
    font-weight: 800;
    &Symbol{
      font-size: 16upx;
      font-weight: 400;
    }
  }

  .goBuyBtn {
    padding: 10upx 20upx;
    border-radius: 100px;
    background-image: linear-gradient(45deg, #fa3f3f, #fb8c43);
    color: #fff;
    font-size: 24upx;
  }
}

/* 解决小程序和app滚动条的问题 */
/* #ifdef MP-WEIXIN || APP-PLUS */
/deep/ ::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}
/* #endif */

/* 解决H5 的问题 */
/* #ifdef H5 */
/deep/  uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
  /* 隐藏滚动条，但依旧具备可以滚动的功能 */
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}
/* #endif */

</style>
